<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>player comparison</title>
    <link href='/public/player.css' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
        div.block {
            float: left;
            text-align: center;
            border: 1px solid black;
            margin: 1px;
            padding: 2px;
            width: 19vw;
        }
        video {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="block">
    <p>video player using progressive mp4 (will not work in safari)</p>
    <video controls autoplay src="/starbucks.mp4"></video>
</div>

<div class="block">
    <p>video player using m3u8 playlist (native in safari only, osx and ios)</p>
    <video controls autoplay src="/starbucks.m3u8"></video>
</div>

<div class="block">
    <p>media source extensions manual (most browsers, except ios mobile)</p>
    <video id="starbucks"></video>
</div>

<div class="block">
    <p>media source extensions automatic (most browsers, except ios mobile)</p>
    <video autoplay data-namespace="starbucks" data-controls="startstop|fullscreen|snapshot|cycle"></video>
</div>

<div class="block">
    <a href="rtsp://131.95.3.162:554/axis-media/media.3gp">original source</a>
    <br/>
    <a href="/starbucks.mp4">src starbucks.mp4</a>
    <br/>
    <a href="/starbucks.m3u8">src starbucks.m3u8</a>
</div>

<!--<hr style="clear: both;"/>

<div class="block">
    <p>video player using progressive mp4 (will not work in safari)</p>
    <video controls autoplay src="/pool.mp4"></video>
</div>

<div class="block">
    <p>video player using m3u8 playlist (native in safari only, osx and ios)</p>
    <video controls autoplay src="/pool.m3u8"></video>
</div>

<div class="block">
    <p>media source extensions manual (most browsers, except ios mobile)</p>
    <video id="pool"></video>
</div>

<div class="block">
    <p>media source extensions automatic (most browsers, except ios mobile)</p>
    <video autoplay data-namespace="pool" data-controls="startstop|fullscreen|snapshot|cycle"></video>
</div>

<div class="block">
    <a href="rtsp://216.4.116.29:554/axis-media/media.3gp">original source</a>
    <br/>
    <a href="/pool.mp4">src pool.mp4</a>
    <br/>
    <a href="/pool.m3u8">src pool.m3u8</a>
</div>-->

<script src="/socket.io/socket.io.js">//must be included before player.js because socket.io is used for transport</script>
<script src="/public/player.min.js">//script runs and builds mse players on top of video elements that have valid data-namespace attribute</script>
<script>
    //can also be directly called later by specifically targeting window.videoPlayers[i]
    new VideoPlayer({video: document.getElementById('starbucks'), io: io, namespace: 'starbucks', controls: 'startstop|fullscreen|snapshot|cycle'}).start();
    new VideoPlayer({video: document.getElementById('pool'), io: io, namespace: 'pool', controls: 'startstop|fullscreen|snapshot|cycle'}).start();
</script>

</body>
</html>